<template>
    <div class="order-box">
        <div class="orders" :key="it.id">
            <p class="order">订单号：{{ it.id }}</p>
            <p class="order">收货人：{{ useCommonStore().userInfo.name }}</p>
            <p class="order">收货地址：{{ address }}</p>
            <div class="items" v-for="oo in it.list" :key="oo.id">
                <img :src="baseURL + oo.bgUrl">
                <div class="rig">
                    <div class="title">{{ oo.name }}</div>
                    <div class="footer">
                        <p class="price">￥<i>{{ oo.price }}.00</i></p>
                        <span>&times;{{ oo.count }}</span>
                    </div>
                </div>
            </div>
            <div class="btn" v-if="it.state === 'NEW'">
                <van-button type="primary" size="small" @click="finishEvt(it.id)">已完成</van-button>
                <van-button type="primary" size="small" @click="cancelEvt(it.id)">取消</van-button>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { showToast } from 'vant';
import { ref ,Ref} from 'vue';
import { finishOrderApi } from '../../apis/cartApis';
import { useCommonStore } from '../../store';
const baseURL = window.baseURL;
const props = defineProps({
    it:{
        type:Object,
        required:true
    }
})
const address:Ref = ref()
address.value = props.it.list[0].detailaddress
async function finishEvt(orderId:string){
    let _res = await finishOrderApi(useCommonStore().userInfo.id,orderId)
    console.log(_res)
}
async function cancelEvt(orderId:string){
    
    let _res = await finishOrderApi(useCommonStore().userInfo.id,orderId)
    if(_res.code === 200){
        showToast('取消成功！')
    }
}
</script>

<style lang="less" scoped>
@import url('../../style/comon.less');
.order-box{
    display: block;
    padding: 10px;
    .orders{
        background-color: #fff;
        padding: 6px;
        border-radius: 10px;
        box-shadow: 0 0 4px @g3;
        .order{
            font-size: .8rem;
            font-weight: 400;
            color: gray;
            line-height: 1.2rem;
        }
        .items{
            margin: .7rem 0;
            display: flex;
            padding: 10px;
            background-color: @g1;
            img{
                height: 30vw;
                display: block;
            }
            .rig{
                padding-left: 10px;
                .title{
                    font-size: .7rem;
                    font-weight: 500;
                }
                .footer{
                    height: 50px;
                    display: flex;
                    line-height: 50px;
                    justify-content: space-between;
                    .price{
                        font-size: .7rem;
                        font-weight: 500;
                        color: #aeaeae;
                        i{
                            font-style: normal;
                            font-size: .8rem;
                            color: @b1;
                        }
                    }
                    span{
                        font-size: .7rem;
                        color: #aeaeae;
                    }
                }
            }
            
        }
        .btn{
                    display: flex;
                    justify-content: flex-end;
                    .van-button{
                        margin: 0px 6px;
                        background-color: @g3;
                        color: @b1;
                        border: none;
                    }
                }
    }
}
</style>